<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
        width: 400px;
        min-height: 300px;
        background-color: lightgreen;
        margin: auto;
        padding: 10px;
        text-align: center;
    }
    li{
        list-style: none;
        text-align: left;
    }

    </style>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#query").click(function(){
                //var code = $('#city').val();
                var cityName = "郑州";
                $.ajax({
                    url : 'http://v.juhe.cn/weather/index',
                    data:{cityname:cityName,key:"b359fda524a14765db56176eb450f683"},
                    dataType:'jsonp',
                    success:function(data){
                        var today = data.result.today;
                        var future = data.result.future;
                        var tag = "";

                        tag+="<ul>";
                        tag+="<li>"+today.city+"</li>";
                        tag+="<li>"+today.date_y+"</li>";
                        tag+="<li>"+today.temperature+"</li>";
                        tag+="<li>"+today.weather+"</li>";
                        tag+="<li>"+today.week+"</li>";
                        tag+="<li>"+today.wind+"</li>";
                        tag+="<li>"+today.dressing_advice+"</li>";

                        tag+="</ul>";

                        $("#info").html(tag);

                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <select id="city">
            <option value="101010100">北京</option>
            <option value="101020100">上海</option>
            <option value="101280101">广州</option>
            <option value="101280601">深圳</option>
        </select>
        <input type="button" value="查询" id="query">
        <div id="info"></div>
    </div>

    
</body>
</html>

